<template>
    <div class="themeTitle" :style="{ backgroundImage: `url(${ImgSrc})` }">
        <div class="titleWord">
            {{ titles }}
        </div>
    </div>
</template>

<script>
export default {
    props: {
        titles: String,
        ImgSrc: String,
    },
    setup() {
        return {};
    },
};
</script>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .themeTitle {
        width: vw(365);
        height: vh(32);
        background: url('/data/images/hngk/themeTitle.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: bottom left;

        .titleWord {
            letter-spacing: vw(1);
            font-size: vw(18);
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .themeTitle {
        width: 100%;
        height: vh(35);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: bottom left;

        .titleWord {
            letter-spacing: vw1(1);
            font-size: $f22;
        }
    }
}
</style>